<template>
  <div class="home-container" style="">
    <dv-full-screen-container>
      <dv-border-box-11 class="" title="违章车辆检测系统">
        <div class="box-item">
          <div class="top-wrap">
            <dv-border-box-1>
              <div class="top-title">
                <div style="display: inline-block;margin-right: 10px;">全国检测城市 {{ cityCnt }}/{{ totalCity }}</div>
                <div style="display: inline-block;position:absolute;">
                  <dv-decoration-1 style="width:80px;height: 20px"/>
                </div>
              </div>
              <div class="water-level-pond">
                <dv-water-level-pond :config="waterLevelConfig" style="width: 150px;height: 100px;"/>
              </div>
            </dv-border-box-1>
          </div>
          <div class="top-wrap">
            <dv-border-box-1>
              <div class="top-title">
                <div style="display: inline-block;margin-right: 10px;">全国检测区/县级市 {{streetCnt}}/{{totalStreet}}</div>
                <div style="display: inline-block;position:absolute;">
                  <dv-decoration-1 style="width:80px;height: 20px"/>
                </div>
              </div>
              <div class="water-level-pond">
                <dv-water-level-pond :config="cityWaterLevelConfig" style="width: 150px;height: 100px;"/>
              </div>
            </dv-border-box-1>
          </div>
          <div class="top-wrap">
            <dv-border-box-1>
              <div class="top-title">
                <div style="display: inline-block;margin-right: 10px;">总检测违规车辆</div>
                <div style="display: inline-block;position:absolute;">
                  <dv-decoration-1 style="width:80px;height: 20px"/>
                </div>
              </div>
              <div class="water-level-pond">
                <dv-conical-column-chart :config="totalCntConfig" style="width:100%;height:120px;"/>
              </div>
            </dv-border-box-1>
          </div>
          <div class="top-wrap">
            <dv-border-box-13>
              <div class="top-title">
                <div style="display: inline-block;margin-right: 10px;">违停排名</div>
                <div style="display: inline-block;position:absolute;">
                  <dv-decoration-1 style="width:80px;height: 20px"/>
                </div>
              </div>
              <div class="rank-pond">
                <dv-scroll-ranking-board :config="rankingConfig" style="width:100%;height:120px;"/>
              </div>
            </dv-border-box-13>
          </div>
        </div>
        <div class="box-item bottom-f">
          <div style="flex: 2;">
            <div class="top-middle-cmp">
              <div class="chart-name">
                <span>违规检测统计</span>
                <dv-decoration-3 style="width:150px;height:20px;"/>
              </div>
              <dv-charts :option="option"/>
            </div>
          </div>
          <div style="flex: 1;height: 100%">
            <dv-border-box-8 :dur="10" style="height: 100%">
              <div style="position: relative;padding: 10px 0 0 20px;margin-bottom: 10px;">
                <div style="display: inline-block;margin-right: 10px;">操作</div>
                <div style="display: inline-block;position:absolute;">
                  <dv-decoration-6 style="width:80px;height: 20px"/>
                </div>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;padding: 20px 20px 20px 30px">
                <div style="flex: 1;position: relative">
                  <dv-decoration-9 style="width:150px;height:150px;">{{ syncP > 0 ? syncP : '' }}</dv-decoration-9>
                  <div class="op-desc" @click="sync()">{{ syncP > 0 ? '' : '同步' }}</div>
                </div>
                <div style="flex: 1;position: relative">
                  <dv-decoration-12 style="width:150px;height:150px;"/>
                  <div class="op-desc" @click="goHome()">进入检测</div>
                </div>
              </div>
            </dv-border-box-8>
          </div>
        </div>
      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script>
import TopLeftCmp from '@/components/datav/TopLeftCmp'
import TopMiddleCmp from '@/components/datav/TopMiddleCmp'

export default {
  name: 'Index',
  components: {
    TopLeftCmp,
    TopMiddleCmp
  },
  data() {
    return {
      totalCity: 333,
      totalStreet: 2843,
      cityCnt: 0,
      streetCnt: 0,
      // 城市
      waterLevelConfig: {},
      // 市区
      cityWaterLevelConfig: {},
      rankingConfig: {},
      totalCntConfig: {},
      option: {},
      syncP: 0
    }
  },
  created() {
    this.info()
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color: black;color:white;')
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    goHome() {
      this.$router.push({ path: '/image-z' })
    },
    sync() {
      this.syncP = 0
      let jishu = 20
      this.interval = setInterval(() => {
        this.syncP += jishu
        if (this.syncP > 80) {
          jishu = 5
        } else if (this.syncP > 90) {
          jishu = 1
        } else if (this.syncP >= 99) {
          clearInterval(this.interval)
          this.syncP = 0
        }
      }, 1000)

      this.$http.post('http://localhost:8003/fj-api/analysis/sync', {}, { contentType: false, processData: false, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
        .then((response) => {
          console.log('upload response:', response)
          this.$message.success('同步成功')
        }).catch(() => {
        this.$message.error('同步失败')
      }).finally(() => {
        clearInterval(this.interval)
        this.syncP = 100
        this.loadingSync = false
        this.info()
      })
    },
    info() {
      this.$http.get('http://localhost:8003/fj-api/analysis/info')
        .then((response) => {
          const data = response.data
          console.log(data)
          // 城市
          this.cityCnt = data.area.cnt
          this.waterLevelConfig = {
            data: [
              (data.area.cnt / this.totalCity).toFixed(2) * 100
            ],
            shape: 'roundRect'
          }
          console.log(this.waterLevelConfig)
          // street
          this.streetCnt = data.street.cnt
          this.cityWaterLevelConfig = {
            data: [
              (data.street.cnt / this.totalStreet).toFixed(2) * 100
            ],
              shape: 'round'
          }
          console.log(this.cityWaterLevelConfig)
          // total
          this.totalCntConfig = {
            data: [
              {
                name: '',
                value: data.car.cnt
              }
            ],
              img: [
              'http://datav.jiaminghi.com/img/conicalColumnChart/5st.png'
            ],
              showValue: true
          }
          console.log(this.totalCntConfig)
          // rank
          const barData = []
          data.rankList.forEach((item, index) => {
            if (index < 4) {
              barData.push({
                name: item.name,
                value: item.cnt
              })
            }
          })
          this.rankingConfig = {
            data: [
              ...barData
            ],
              unit: '辆',
              waitTime: '60000'
          }
          // statistic
          // month
          const month = []
          const cntArr = []
          data.analysisList.forEach((item, index) => {
            month.push(item.month)
            cntArr.push(item.cnt)
          })
          this.option = {
            legend: {
              data: ['检测违规数量'],
                textStyle: {
                fill: '#fff'
              }
            },
            xAxis: {
              data: [
                ...month
              ],
                boundaryGap: false,
                axisLine: {
                style: {
                  stroke: '#999'
                }
              },
              axisLabel: {
                style: {
                  fill: '#999'
                }
              },
              axisTick: {
                show: false
              }
            },
            yAxis: {
              data: 'value',
                splitLine: {
                show: false
              },
              axisLine: {
                style: {
                  stroke: '#999'
                }
              },
              axisLabel: {
                style: {
                  fill: '#999'
                },
                // formatter({value}) {
                //   return value
                // }
              },
              axisTick: {
                show: false
              },
              min: 0
              // max: 100,
              // interval: 0.5
            },
            series: [
              {
                data: [
                  ...cntArr
                ],
                type: 'line',
                name: '',
                // smooth: true,
                lineArea: {
                  // show: true,
                  gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
                },
                linePoint: {
                  radius: 4,
                  style: {
                    fill: '#00db95'
                  }
                }
              }
            ]
          }
        }).catch(() => {

      }).finally(() => {
        this.syncP = 0
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  font-size: 15px;
}

.top-middle-cmp {
  position: relative;
  padding: 0 ;
  box-sizing: border-box;
  height: 350px;

  .chart-name {
    position: absolute;
    right: 70px;
    text-align: right;
    font-size: 15px;
    top: 10px;
  }
}

.top-left-cmp {
  display: flex;

  .dc-left, .dc-right {
    width: 50%;
  }

  .dv-border-box-5 {
    height: 60%;
  }

  .dc-text {
    display: flex;
    flex-direction: column;
    height: 40%;
    font-size: 15px;
    padding: 20px;
    box-sizing: border-box;
  }

  .dc-left .dc-text {
    align-items: flex-end;
    justify-content: center;
  }

  .dc-right .dc-text {
    justify-content: flex-start;
    padding-top: 20px;
  }

  .dc-left .dv-border-box-5 {
    padding: 30px;
    box-sizing: border-box;
  }

  .dc-right .dv-border-box-5 {
    padding: 40px;
    padding-left: 75px;
    box-sizing: border-box;
  }

  .main-value {
    font-weight: bold;
    font-size: 30px;

    span {
      font-size: 50px;
      color: #00c0ff;
      margin-right: 15px;
    }
  }

  .compare-value {
    height: 35px;
    line-height: 35px;
    font-size: 18px;

    span {
      margin-right: 30px;
    }
  }
}

.water-level-pond {
  padding: 0 50px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
}

.rank-pond {
  padding: 0 20px;
}

.top-title {
  display: inline-block;
  position: relative;
  padding: 20px 0 0 20px;
  margin-bottom: 10px;
}

.top-wrap {
  display: flex;
  flex: 1;
  width: 25%;
  height: 190px;

  /deep/ .dv-scroll-ranking-board {
    .row-item {
      height: 30px !important;
      margin-bottom: 2px;
    }

    .ranking-column {
      border-bottom: unset !important;
      margin-top: 0 !important;
    }
  }
}

.op-desc {
  position: absolute;
  width: 150px;
  line-height: 150px;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  cursor: grab;
}

.box-item {
  display: flex;
  padding: 80px 30px 20px 30px;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
  align-content: space-between;

  &.bottom-f {
    padding-top: 20px;
  }
}
</style>